﻿<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title> 广告图片轮播切换</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="../../js/jquery-3.5.1.js"></script>
</head>
<body>
<div class="adver">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <div class="arrowLeft"><</div>
    <div class="arrowRight">></div>
</div>
<script type="text/javascript">
    let i = 1;//默认1
    let timer; //自动轮播定时器
    $(function () {
        $(".adver").hover(function () {
            //悬浮
            $(".arrowLeft,.arrowRight").show();
            clearInterval(timer);//清除定时器
        },function () {
            //离开
            $(".arrowLeft,.arrowRight").hide();
            //重新运行定时器
            timer = setInterval(function () {
                next();
            },1000)
        })

        //上一张
        $(".arrowLeft").click(function () {
            //判断是否是第一张
            i--;//i-1
            if(i==0){
                i = 6; //如果是第一张 就从最后一张开始
            }
            //图片切换
            $(".adver").css("background","url(images/adver0"+i+".jpg)");
            //当前li背景变色
            $("li:nth-of-type("+i+")").css("background","orange")
                .siblings().css("background","#333");//除当前li以外所有li背景变色
        });

        $(".arrowRight").click(function () {
           next();
        });

        $("li").click(function () {
            i = this.innerText;
            //图片切换
            $(".adver").css("background","url(images/adver0"+i+".jpg)");
            //当前li背景变色
            $("li:nth-of-type("+i+")").css("background","orange")
                .siblings().css("background","#333");//除当前li以外所有li背景变色
        })

        timer = setInterval(function () {
            next();
        },1000)
    })

    function next() {
        //判断是否是最后一张
        i++;//i-1
        if(i==7){
            i = 1; //如果是最后一张 就从最后第一张开始
        }
        //图片切换
        $(".adver").css("background","url(images/adver0"+i+".jpg)");
        //当前li背景变色
        $("li:nth-of-type("+i+")").css("background","orange")
            .siblings().css("background","#333");//除当前li以外所有li背景变色
    }
</script>

</body>
</html>